<template>
  <div class="tenant-container">
    <div class="tenant-header">
      <el-image
        style="width: 100px; height: 100px"
        :src="require('@/assets/header_images/tenantManage.png')"
      ></el-image>
      <div class="title">
        租户管理
        <div class="title-content">
          对多租户环境中不同租户进行资源隔离、权限控制、数据安全和个性化配置的统一管理
        </div>
      </div>
    </div>
    <div class="tenant-info">
      <div class="tenant-operate">
        <span class="keyword">关键词：</span>
        <el-input
          placeholder="请输入租户名、集群"
          style="width: 20%"
          clearable
          v-model="searchKeyword"
          @input="handleSearch"
        >
        </el-input>
        <!-- <el-button icon="el-icon-search" circle @click="handleSearch"></el-button> -->
        <div class="right-menu">
          <el-button
            type="primary"
            @click="handleAddTenant"
            class="el-button-primary-style"
          >
            添加
          </el-button>
        </div>
        <el-popconfirm
          title="此操作将永久删除选中的租户, 是否确认？"
          @confirm="batchDeleteTenant"
        >
          <el-button
            slot="reference"
            v-show="multipleMainTenantSelection.length > 0"
            type="danger"
            style="margin-left: 20px"
          >
            删除
          </el-button>
        </el-popconfirm>
      </div>
      <div class="tenant-table">
        <el-table
          ref="multipleTable"
          tooltip-effect="dark"
          style="width: 100%"
          :data="tableData"
          @selection-change="handleSelectionChange"
          height="60vh"
        >
          <!--          :header-cell-style="{ textAlign: 'center' }"-->
          <el-table-column type="selection" width="60rem" align="center"></el-table-column>
          <el-table-column prop="tenantName" label="租户名" width="200rem">
          </el-table-column>
          <el-table-column prop="clusterZhname" label="集群" width="150rem">
            <template slot-scope="scope">
              <div class="descSpan">
                {{ scope.row.clusterZhname }}
              </div>
            </template>
          </el-table-column>
          <!--命名空间&&用户未见字段-->
          <!-- <el-table-column prop="createBy" label="命名空间" width="120rem"> -->
          <el-table-column prop="tenantName" label="命名空间" width="200rem">
          </el-table-column>
          <el-table-column label="描述">
            <template slot-scope="scope">
              <el-tooltip
                effect="dark"
                :content="scope.row.tenantDescription"
                placement="bottom"
                popper-class="myTooltipClass"
                :disabled="isShowTooltip"
              >
                <div class="descSpan" @mouseover="onMouseOver($event)">
                  {{ scope.row.tenantDescription }}
                </div>
              </el-tooltip>
            </template>
          </el-table-column>
          <el-table-column prop="updateTime" label="创建时间" width="200rem">
          </el-table-column>
          <el-table-column prop="updateTime" label="操作" width="200rem">
            <template slot-scope="row">
              <el-button
                type="text"
                @click="lookTenantInfo(row)"
                style="padding: 0"
              >
                查看
              </el-button>
              <el-button
                type="text"
                @click="watchTenantDrawer(row.row)"
                style="padding: 0"
              >
                监控
              </el-button>
              <el-button
                type="text"
                @click="updateTenantInfoButton(row)"
                style="margin-right: 10px; padding: 0"
              >
                编辑
              </el-button>
              <el-popconfirm
                title="此操作将永久删除该租户, 是否确认？"
                @confirm="deleteTenantInfo(row.row)"
              >
                <el-button
                  type="text"
                  slot="reference"
                  style="padding: 0; color: #f56c6c"
                >
                  删除
                </el-button>
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
        <div style="margin-top: 10px; float: right">
          <el-Pagination
            background
            layout="total, prev, pager, next, jumper"
            :page-size="tenantPagination.pageSize"
            :total="tenantPagination.total"
            :current-page.sync="tenantPagination.pageNum"
            @current-change="handleTenantPageChange"
          />
        </div>
      </div>
    </div>
    <div class="add-tenant" v-if="addTenantDialogVisible">
      <el-drawer
        title="添加租户"
        :visible.sync="addTenantDialogVisible"
        direction="rtl"
        size="50%"
        :wrapperClosable="false"
        :destroy-on-close="true"
        :before-close="closeAddTenantDialogVisible"
      >
        <div style="margin-left: 30px">
          <div class="section-title">
            <span style="color: red">* </span>
            基本信息
          </div>
          <el-form
            ref="baseInfo"
            :model="addTenantForm"
            :rules="baseInfoRules"
            label-width="80px"
          >
            <div style="width: 95%;">
              <el-form-item label="租户名称" prop="tenantName">
                <el-input
                  v-model="addTenantForm.tenantName"
                  class="input"
                  placeholder="请输入租户名称"
                ></el-input>
              </el-form-item>
              <el-form-item label="租户描述" prop="tenantDescription">
                <el-input
                  v-model="addTenantForm.tenantDescription"
                  class="input"
                  placeholder="请输入租户信息描述"
                  type="textarea"
                ></el-input>
              </el-form-item>
            </div>
            <div class="section-title">
              <span style="color: red">* </span>
              集群信息
            </div>
            <div style="width: 95%">
              <el-row>
                <el-col :span="12">
                  <el-form-item label="所属集群" prop="clusterId">
                    <el-select
                      v-model="addTenantForm.clusterId"
                      filterable
                      placeholder="请选择一个集群"
                      @change="selectClusterChange"
                      style="width: 100%"
                    >
                      <el-option
                        v-for="item in allClusterData"
                        :key="item.id"
                        :label="item.clusterZhname"
                        :value="item.id"
                      >
                      </el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="12" v-show="addTenantForm.clusterId !== ''">
                  <el-form-item label="集群地址">
                    <el-input
                      v-model="selectCluster.clusterUrl"
                      style="width: 100%"
                      disabled
                    ></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="12">
                  <el-form-item label="CPU" prop="tenantCpu">
                    <el-input
                      v-model="addTenantForm.tenantCpu"
                      class="input"
                      style="width: 100%"
                      @focus="resourceSurplus"
                      @blur="checkInputInfo"
                    >
                      <template v-slot:append>核</template>
                    </el-input>
                    <span
                      v-show="remainingResourceInfo.remainingCpu !== undefined"
                    >
                      可用资源{{ remainingResourceInfo.remainingCpu }}核
                    </span>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="内存" prop="tenantMem">
                    <el-input
                      v-model="addTenantForm.tenantMem"
                      class="input"
                      style="width: 100%"
                      @focus="resourceSurplus"
                      @blur="checkInputInfo"
                    >
                      <template v-slot:append>GB</template>
                    </el-input>
                    <span
                      v-show="remainingResourceInfo.remainingMem !== undefined"
                    >
                      可用资源{{ (remainingResourceInfo.remainingMem / 1024).toFixed(1) }}GB
                    </span>
                  </el-form-item>
                </el-col>
              </el-row>
            </div>

            <div v-if="addTenantForm.label.length > 0" style="width: 95%">
              <div class="section-title">
                <span style="color: #ffffff">* </span>
                标签
              </div>
              <div>
                <el-row
                  v-for="(labelInfo, index) in addTenantForm.label"
                  :key="index"
                >
                  <el-col :span="10">
                    <el-form-item label="KEY">
                      <el-input
                        v-model="labelInfo.labelKey"
                        class="input"
                        placeholder="请输入标签KEY"
                        @blur="judgeReg('add')"
                      ></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="11">
                    <el-form-item label="VALUE">
                      <el-input
                        v-model="labelInfo.labelValue"
                        class="input"
                        placeholder="请输入标签VALUE"
                        @blur="judgeReg('add')"
                      ></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="3">
                    <div style="justify-content: right; display: flex;">
                      <el-button
                        type="primary"
                        class="el-button-primary-style"
                        @click="deleteLabelOrAnnotation('add', 'label', index)"
                        size="small"
                      >删除
                      </el-button>
                    </div>
                  </el-col>
                </el-row>
              </div>
            </div>
            <div v-if="addTenantForm.annotation.length > 0" style="width: 95%">
              <div class="section-title">
                <span style="color: #ffffff">* </span>
                注释
              </div>
              <div>
                <el-row
                  v-for="(annotationInfo, index) in addTenantForm.annotation"
                  :key="index"
                >
                  <el-col :span="10">
                    <el-form-item label="KEY">
                      <el-input
                        v-model="annotationInfo.annotationKey"
                        class="input"
                        placeholder="请输入注释KEY"
                        @blur="judgeReg('add')"
                      ></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="11">
                    <el-form-item label="VALUE">
                      <el-input
                        v-model="annotationInfo.annotationValue"
                        class="input"
                        placeholder="请输入注释VALUE"
                        @blur="judgeReg('add')"
                      ></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="3">
                    <div style="justify-content: right; display: flex;">
                      <el-button
                        type="primary"
                        class="el-button-primary-style"
                        @click="deleteLabelOrAnnotation('add', 'annotation', index)"
                        size="small"
                      >删除
                      </el-button>
                    </div>
                  </el-col>
                </el-row>
              </div>
            </div>

            <div style="display: flex; justify-content: right; width: 95%;">
              <el-button
                type="primary"
                @click="addNewLabel"
                class="el-button-primary-style"
                size="small"
              >添加标签
              </el-button>
              <el-button
                type="primary"
                @click="addNewAnnotations"
                class="el-button-primary-style"
                size="small"
              >添加注释
              </el-button>
            </div>

            <div class="section-title">
              <span style="color: red">* </span>用户信息
            </div>
            <div style="width: 95%;">
              <el-form-item label="所属用户" prop="ids">
                <el-select
                  v-model="addTenantForm.ids"
                  filterable
                  placeholder="请选择用户"
                  @change="selectUserChange"
                  style="width: 100%"
                  multiple
                >
                  <el-option
                    v-for="item in allUserData"
                    :key="item.id"
                    :label="item.username"
                    :value="item.id"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </div>
          </el-form>

          <!-- 租户关联用户信息部分 -->
          <div v-if="addTenantForm.ids.length !== 0">
            <div class="section-title moveRight">租户关联用户信息</div>
            <div style="width: 95%;">
              <el-table
                :data="showConnectUserData"
                style="width: 100%"
                @selection-change="handleSelectionChange"
                :cell-style="{ textAlign: 'center' }"
                :header-cell-style="{ textAlign: 'center' }"
              >
                <el-table-column
                  prop="username"
                  label="用户名"
                ></el-table-column>
                <el-table-column label="角色" width="170">
                  <template slot-scope="scope">
                    {{ getRoleTypeName(scope.row.roleType) }}
                  </template>
                </el-table-column>
                <el-table-column label="状态" width="170">
                  <template slot-scope="scope">
                    {{ getStatusName(scope.row.userStatus) }}
                  </template>
                </el-table-column>
                <el-table-column
                  prop="updateTime"
                  label="创建时间"
                ></el-table-column>
              </el-table>
            </div>
          </div>
          <div style="display: flex; justify-content: right; width: 95%; margin-top: 5px;">
            <el-button
              type="primary"
              size="small"
              @click="confirmAddTenant"
              class="el-button-primary-style"
            >确定
            </el-button>
            <el-button
              type="primary"
              size="small"
              @click="cancelAddTenant"
              class="el-button-primary-style"
            >取消
            </el-button>
          </div>
        </div>
      </el-drawer>
    </div>
    <div class="update-tenant" v-if="lookTenantDialogVisible">
      <el-dialog
        :width="dialogWidth"
        :visible.sync="lookTenantDialogVisible"
        :close-on-click-modal="false"
        :close-on-press-escape="false"
        :destroy-on-close="true"
        :before-close="closeLookTenantDialogVisible"
      >
        <template v-slot:title>
          <span class="dialog-title">查看租户信息</span>
        </template>
        <!-- 基本信息部分 -->
        <div style="height: 50vh; overflow-y: scroll">
          <div class="section-title" style="width: 97%;">基本信息</div>
          <div style="width: 97%;">
            <el-form label-width="80px" v-if="gvKubeTenantData.length !== 0">
              <el-row>
                <el-col :span="12">
                  <el-form-item label="租户名称">
                    <el-input
                      v-model="gvKubeTenantData[0].tenantName"
                      :disabled="true"
                    ></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="租户描述">
                    <el-input
                      v-model="gvKubeTenantData[0].tenantDescription"
                      :disabled="true"
                    ></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="12">
                  <el-form-item label="所属集群">
                    <el-input
                      v-model="gvKubeTenantData[0].clusterZhname"
                      :disabled="true"
                    ></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="集群地址">
                    <el-input
                      v-model="gvKubeClusterData[0].clusterUrl"
                      :disabled="true"
                    ></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="12">
                  <el-form-item label="CPU限制">
                    <el-input
                      v-model="gvKubeTenantData[0].tenantCpu"
                      :disabled="true"
                    >
                      <template slot="append">核</template>
                    </el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="内存限制">
                    <el-input
                      v-model="gvKubeTenantData[0].tenantMem / 1024"
                      :disabled="true"
                    >
                      <template slot="append">GB</template>
                    </el-input>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
          </div>

          <div
            v-if="
              gvKubeTenantData.length !== 0 &&
              gvKubeTenantData[0].label.length > 0
            "
            style="width: 97%"
          >
            标签
            <el-form label-width="80px">
              <el-row
                v-for="(labelInfo, index) in gvKubeTenantData[0].label"
                :key="index"
              >
                <el-col :span="12">
                  <el-form-item label="KEY">
                    <el-input
                      v-model="labelInfo.labelKey"
                      placeholder="key"
                      :disabled="true"
                    ></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="VALUE">
                    <el-input
                      v-model="labelInfo.labelValue"
                      placeholder="value"
                      :disabled="true"
                    ></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
          </div>
          <div
            v-if="
              gvKubeTenantData.length !== 0 &&
              gvKubeTenantData[0].annotation.length > 0
            "
            style="width: 97%"
          >
            注释
            <el-form label-width="80px">
              <el-row
                v-for="(annotationInfo, index) in gvKubeTenantData[0].annotation"
                :key="index"
              >
                <el-col :span="12">
                  <el-form-item label="KEY">
                    <el-input
                      v-model="annotationInfo.annotationKey"
                      placeholder="key"
                      :disabled="true"
                    ></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="VALUE">
                    <el-input
                      v-model="annotationInfo.annotationValue"
                      placeholder="value"
                      :disabled="true"
                    ></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
          </div>

          <!-- 租户关联用户信息部分 -->
          <div class="section-title" style="width: 97%;">租户关联用户信息</div>
          <el-table
            :data="gvKubeUserData"
            style="width: 97%"
            @selection-change="handleSelectionChange"
          >
            <el-table-column
              prop="username"
              label="用户名"
            ></el-table-column>
            <el-table-column label="角色" width="170">
              <template slot-scope="scope">
                {{ getRoleTypeName(scope.row.roleType) }}
              </template>
            </el-table-column>
            <el-table-column label="状态" width="170">
              <template slot-scope="scope">
                {{ getStatusName(scope.row.userStatus) }}
              </template>
            </el-table-column>
            <el-table-column
              prop="updateTime"
              label="创建时间"
            ></el-table-column>
          </el-table>
          <div style="display: flex; justify-content: right; width: 97%; margin-top: 5px;">
            <el-button
              type="primary"
              size="small"
              @click="cancelLookDialog"
              class="el-button-primary-style"
            >关闭
            </el-button>
          </div>
        </div>
        <!--        </el-form>-->
        <!-- <span slot="footer" class="dialog-footer">
          <el-button type="primary" size="small" @click="cancelUpdateTenant">取消</el-button>
          <el-button type="primary" size="small" @click="confirmUpdateTenant">确定</el-button>
        </span> -->
      </el-dialog>
    </div>
    <div class="update-tenant" v-if="updateTenantDialogVisible">
      <el-drawer
        title="修改租户"
        :visible.sync="updateTenantDialogVisible"
        direction="rtl"
        size="50%"
        :wrapperClosable="false"
        :destroy-on-close="true"
        :before-close="closeLookTenantDialogVisible"
      >
        <div style="margin-left: 30px">
          <div class="section-title">
            <span style="color: red">* </span>
            基本信息
          </div>
          <el-form
            ref="updateBaseInfo"
            :model="updateTenantForm"
            :rules="updateBaseInfoRules"
            label-width="80px"
          >
            <div style="width: 95%">
              <el-form-item label="租户名称" prop="tenantName">
                <el-input
                  v-model="updateTenantForm.tenantName"
                  class="input"
                  placeholder="请输入租户名称"
                  disabled
                ></el-input>
              </el-form-item>
              <el-form-item label="租户描述" prop="tenantDescription">
                <el-input
                  v-model="updateTenantForm.tenantDescription"
                  class="input"
                  placeholder="请输入租户信息描述"
                  type="textarea"
                ></el-input>
              </el-form-item>
            </div>
            <!-- 集群信息列表 -->
            <!-- <div class="section-title">集群信息</div> -->
            <div class="section-title">
              <span style="color: red">* </span>租户关联集群信息
            </div>
            <div>
              <!--这个地方需要的是数组格式而不是detail的对象格式-->
              <el-table
                :data="gvKubeClusterData"
                style="width: 95%"
                @selection-change="handleSelectionChange"
                :cell-style="{ textAlign: 'center' }"
                :header-cell-style="{ textAlign: 'center' }"
              >
                <el-table-column
                  prop="clusterZhname"
                  label="名称"
                  width="130"
                ></el-table-column>
                <el-table-column
                  label="集群描述"
                >
                  <template slot-scope="scope">
                    <el-tooltip
                      effect="dark"
                      :content="scope.row.clusterDescription"
                      placement="bottom"
                      popper-class="myTooltipClass"
                    >
                      <div class="descSpan">
                        {{ scope.row.clusterDescription }}
                      </div>
                    </el-tooltip>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="clusterUrl"
                  label="集群地址"
                  width="160"
                ></el-table-column>
                <el-table-column
                  prop="updateTime"
                  label="创建时间"
                  width="160"
                ></el-table-column>
                <el-table-column prop="cpuLimit" label="CPU(核)" width="100">
                  <template slot-scope="scope">
                    {{ scope.row.cpuLimit }}
                  </template>
                </el-table-column>
                <el-table-column
                  prop="memoryLimit"
                  label="内存(GB)"
                  width="100"
                >
                  <template slot-scope="scope">
                    {{ scope.row.memoryLimit / 1024 }}
                  </template>
                </el-table-column>
              </el-table>
            </div>

            <div v-if="updateTenantForm.label.length > 0" style="width: 95%">
              <div class="section-title">
                <span style="color: #ffffff">* </span>
                标签
              </div>
              <div>
                <el-row
                  v-for="(labelInfo, index) in updateTenantForm.label"
                  :key="index"
                >
                  <el-col :span="10">
                    <el-form-item label="KEY">
                      <el-input
                        v-model="labelInfo.labelKey"
                        class="input"
                        placeholder="请输入标签KEY"
                        @blur="judgeReg('update')"
                      ></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="11">
                    <el-form-item label="VALUE">
                      <el-input
                        v-model="labelInfo.labelValue"
                        class="input"
                        placeholder="请输入标签VALUE"
                        @blur="judgeReg('update')"
                      ></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="3">
                    <div style="justify-content: right; display: flex;">
                      <el-button
                        type="primary"
                        class="el-button-primary-style"
                        @click="deleteLabelOrAnnotation('update', 'label', index)"
                        size="small"
                      >删除
                      </el-button>
                    </div>
                  </el-col>
                </el-row>
              </div>
            </div>
            <div
              v-if="updateTenantForm.annotation.length > 0"
              style="width: 95%"
            >
              <div class="section-title">
                <span style="color: #ffffff">* </span>
                注释
              </div>
              <div>
                <el-row
                  v-for="(annotationInfo, index) in updateTenantForm.annotation"
                  :key="index"
                >
                  <el-col :span="10">
                    <el-form-item label="KEY">
                      <el-input
                        v-model="annotationInfo.annotationKey"
                        class="input"
                        placeholder="请输入注释KEY"
                        @blur="judgeReg('update')"
                      ></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="11">
                    <el-form-item label="VALUE">
                      <el-input
                        v-model="annotationInfo.annotationValue"
                        class="input"
                        placeholder="请输入注释VALUE"
                        @blur="judgeReg('update')"
                      ></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="3">
                    <div style="justify-content: right; display: flex;">
                      <el-button
                        type="primary"
                        class="el-button-primary-style"
                        @click="deleteLabelOrAnnotation('update', 'annotation', index)"
                        size="small"
                      >删除
                      </el-button>
                    </div>
                  </el-col>
                </el-row>
              </div>
            </div>
            <div style="display: flex; justify-content: right; width: 95%; margin-top: 5px;">
              <el-button
                type="primary"
                @click="addNewLabel1"
                class="el-button-primary-style"
                size="small"
              >添加标签
              </el-button>
              <el-button
                size="small"
                type="primary"
                @click="addNewAnnotations1"
                class="el-button-primary-style"
              >添加注释
              </el-button>
            </div>

            <!-- 用户信息部分，需要获取展示用户信息 -->
            <div class="section-title">
              <span style="color: red">* </span>用户信息
            </div>
            <div style="width: 95%;">
              <el-form-item label="所属用户" prop="ids">
                <el-select
                  v-model="updateTenantForm.ids"
                  filterable
                  placeholder="请选择用户"
                  @change="updateSelectUserChange"
                  style="width: 100%"
                  multiple
                >
                  <el-option
                    v-for="item in allUserData"
                    :key="item.id"
                    :label="item.username"
                    :value="item.id"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </div>
          </el-form>

          <!-- 租户关联用户信息部分 -->
          <div class="section-title moveRight">租户关联用户信息</div>
          <!--          <div class="section-context">-->
          <el-table
            :data="gvKubeUserData"
            style="width: 95%"
            @selection-change="handleSelectionChange"
            :cell-style="{ textAlign: 'center' }"
            :header-cell-style="{ textAlign: 'center' }"
          >
            <el-table-column
              prop="username"
              label="用户名"
            ></el-table-column>
            <el-table-column label="角色" width="170">
              <template slot-scope="scope">
                {{ getRoleTypeName(scope.row.roleType) }}
              </template>
            </el-table-column>
            <el-table-column label="状态" width="170">
              <template slot-scope="scope">
                {{ getStatusName(scope.row.userStatus) }}
              </template>
            </el-table-column>
            <el-table-column
              prop="updateTime"
              label="创建时间"
            ></el-table-column>
          </el-table>
          <!--          </div>-->
          <!--          <span slot="footer" class="dialog-footer">-->
          <div style="display: flex; justify-content: right; width: 95%; margin-top: 5px;">
            <el-button
              type="primary"
              size="small"
              @click="confirmUpdateTenant"
              class="el-button-primary-style"
            >确定
            </el-button>
            <el-button
              type="primary"
              size="small"
              @click="cancelUpdateTenant"
              class="el-button-primary-style"
            >取消
            </el-button>
          </div>
          <!--          </span>-->
        </div>
      </el-drawer>
    </div>
    <el-drawer
      :title="watchClusterName"
      :visible.sync="watchDrawerVisible"
      size="90%"
      :closeDrawer="closeDrawer"
      :destroy-on-close="true"
    >
      <iframe :src="grafanaAddress" width="100%" height="95%"></iframe>
    </el-drawer>
  </div>
</template>

<script>
  export default {
    name: "TenantManage",
    data() {
      return {
        isShowTooltip: false,
        tableData: [],
        showConnectUserData: [],
        multipleMainTenantSelection: [],
        selectedIds: [],
        searchKeyword: "",
        addTenantDialogVisible: false,
        updateTenantDialogVisible: false,
        lookTenantDialogVisible: false,
        addTenantForm: {
          tenantName: "",
          tenantDescription: "",
          clusterId: "",
          tenantCpu: "",
          tenantMem: "",
          ids: [],
          label: [],
          annotation: [],
        },
        baseInfoRules: {
          tenantName: [
            {required: true, message: "请输入租户名称", trigger: "blur"},
            {
              pattern: /^[a-z]([a-z0-9-])*[a-z]$/,
              message:
                "租户名称只能包含小写字母、数字、-，且只能以小写字母开头、结尾",
              trigger: ["blur", "change"],
            },
            {
              min: 2,
              max: 24,
              message: "长度在 2 到 24 个字符",
              trigger: ["blur", "change"],
            },
          ],
          tenantDescription: [
            {
              max: 512,
              message: "长度小于 512 个字符",
              trigger: ["blur", "change"],
            },
          ],
          tenantCpu: [
            {required: true, message: "请输入CPU大小", trigger: "blur"},
            {
              pattern: /^([0-9])*$/,
              message: "CPU只能包含数字",
              trigger: ["blur", "change"],
            },
          ],
          tenantMem: [
            {required: true, message: "请输入内存大小", trigger: "blur"},
            {
              pattern: /^([0-9])*$/,
              message: "内存只能包含数字",
              trigger: ["blur", "change"],
            },
          ],
          clusterId: [
            {required: true, message: "请选择一个集群", trigger: "change"},
          ],
          ids: [
            {
              type: "array",
              required: true,
              message: "请选择至少一个用户",
              trigger: "change",
            },
          ],
        },
        updateBaseInfoRules: {
          tenantName: [
            {required: true, message: "请输入租户名称", trigger: "blur"},
            {
              pattern: /^[a-z]([a-z0-9-])[a-z]*$/,
              message:
                "租户名称只能包含小写字母、数字、-，且只能以小写字母开头、结尾",
              trigger: ["blur", "change"],
            },
            {
              min: 2,
              max: 24,
              message: "长度在 2 到 24 个字符",
              trigger: ["blur", "change"],
            },
          ],
          tenantDescription: [
            {
              max: 512,
              message: "长度小于 512 个字符",
              trigger: ["blur", "change"],
            },
          ],
          tenantCpu: [
            {required: true, message: "请输入CPU大小", trigger: "blur"},
            {
              pattern: /^([0-9])*$/,
              message: "CPU只能包含数字",
              trigger: ["blur", "change"],
            },
          ],
          tenantMem: [
            {required: true, message: "请输入内存大小", trigger: "blur"},
            {
              pattern: /^([0-9])*$/,
              message: "内存只能包含数字",
              trigger: ["blur", "change"],
            },
          ],
          ids: [
            {
              type: "array",
              required: true,
              message: "请选择至少一个用户",
              trigger: "change",
            },
          ],
        },
        updateTenantForm: {
          id: "",
          tenantName: "",
          tenantDescription: "",
          clusterId: "",
          tenantCpu: "",
          tenantMem: "",
          ids: [],
          label: [],
          annotation: [],
        },
        // 租户分页信息
        tenantPagination: {
          total: 0,
          pageNum: 1,
          pageSize: 10,
        },
        filterKey: "",
        dialogWidth: "810px",
        tenantName: "",
        tenantDescription: "",
        cpuLimit: "",
        memoryLimit: "",
        //编辑用户时获得的各个信息
        gvKubeTenantData: [],
        gvKubeClusterData: [],
        gvKubeUserData: [],
        //角色数字中文转换表
        roleTypeMap: {},
        allClusterData: [],
        selectCluster: {},
        allUserData: [],
        grafanaAddress: "",
        watchClusterName: "",
        watchDrawerVisible: false,
        remainingResourceInfo: {},
      };
    },
    methods: {
      //选中表格的行
      toggleSelection(rows) {
        if (rows) {
          rows.forEach((row) => {
            this.$refs.multipleTable.toggleRowSelection(row);
          });
        } else {
          this.$refs.multipleTable.clearSelection();
        }
      },
      //表格选择项，获得选中的行的信息数组
      handleSelectionChange(val) {
        this.multipleMainTenantSelection = val;
        this.selectedIds = val.map((row) => row.id); // 收集所有选中行的 id
      },
      // 刷新功能函数
      handleRefresh() {
        this.fetchTenantData();
      },
      // 添加租户功能函数，弹出对话框
      handleAddTenant() {
        this.addTenantDialogVisible = true;
        this.fetchClusterData();
        this.fetchUserData();
        this.fetchRoleData();
        // this.addTenantForm = {  // 重置添加租户表单
        //   "tenantName": "",
        //   "tenantDescription": "",
        //   "clusterId": "",
        //   "tenantCpu": "",
        //   "tenantMem": "",
        //   "ids": [],
        //   "label": [],
        //   "annotation": [],
        // };
        // this.updateTenantForm = {  // 重置添加租户表单
        //   "tenantName": "",
        //   "tenantDescription": "",
        //   "clusterId": "",
        //   "tenantCpu": "",
        //   "tenantMem": "",
        //   "ids": [],
        //   "label": [],
        //   "annotation": [],
        // };
        this.showConnectUserData = [];
        this.gvKubeClusterData = [];
        this.gvKubeUserData = [];
        this.gvKubeTenantData = [];
      },
      cancelLookDialog() {
        this.lookTenantDialogVisible = false;
      },
      // 确认添加租户
      confirmAddTenant() {
        if (
          this.addTenantForm.tenantName === "" ||
          this.addTenantForm.clusterId === "" ||
          this.addTenantForm.ids.length === 0
        ) {
          this.$message("租户名称、集群信息、用户信息为必填项！");
        } else {
          let flag = this.judgeReg("add");
          if (flag) {
            return;
          }
          if (!this.checkInputInfo()) {
            return;
          }
          //对象的方法调用并传递参数，url已经在对象的方法中定义了
          this.$refs.baseInfo.validate((valid) => {
            if (valid) {
              console.log("addTenantForm", this.addTenantForm);
              // this.addTenantForm.tenantMem = this.addTenantForm.tenantMem * 1024;
              let tmpTenant = JSON.parse(JSON.stringify(this.addTenantForm));
              console.log("tmpTenant",tmpTenant);
              tmpTenant.tenantMem = tmpTenant.tenantMem * 1024
              this.$tenantManageApi
                .addTenant(tmpTenant)
                .then((response) => {
                  if (response && response.code === 200) {
                    this.addTenantDialogVisible = false;
                    this.fetchTenantData();
                    this.gvKubeClusterData = [];
                    this.gvKubeUserData = [];
                    this.$message.success(response.data);
                    this.cancelAddTenant();
                  }
                })
                .catch((error) => {
                  console.error(error);
                });
            } else {
              return false;
            }
          });
        }
      },
      // 取消添加租户
      cancelAddTenant() {
        this.addTenantDialogVisible = false;
        this.addTenantForm = {
          // 重置添加租户表单
          tenantName: "",
          tenantDescription: "",
          clusterId: "",
          tenantCpu: "",
          tenantMem: "",
          ids: [],
          label: [],
          annotation: [],
        };
        this.showConnectUserData = [];
        this.gvKubeClusterData = [];
        this.gvKubeUserData = [];
      },
      // 确认更新租户
      confirmUpdateTenant() {
        if (this.selectedIds.length === 0) {
          this.$message("请先选择编辑哪一条租户信息！");
        } else {
          let flag = this.judgeReg("update");
          if (flag) {
            return;
          }
          // const params = {
          //   "id": this.selectedIds[0],
          //   "tenantName": this.updateTenantForm.tenantName,
          //   "tenantDescription": this.updateTenantForm.tenantDescription,
          //   "clusterId": this.updateTenantForm.clusterId,
          //   "tenantCpu": this.updateTenantForm.tenantCpu,
          //   "tenantMem": this.updateTenantForm.tenantMem,
          //   "ids": this.updateTenantForm.ids
          // }
          this.$tenantManageApi
            .updateTenant(this.updateTenantForm)
            .then((response) => {
              if (response && response.code === 200) {
                this.updateTenantDialogVisible = false;
                this.fetchTenantData();
                this.updateTenantForm = {
                  // 重置添加租户表单
                  id: "",
                  tenantName: "",
                  tenantDescription: "",
                  clusterId: "",
                  tenantCpu: "",
                  tenantMem: "",
                  ids: [],
                  label: [],
                  annotation: [],
                };
                this.showConnectUserData = [];
                this.gvKubeClusterData = [];
                this.gvKubeUserData = [];
                //this.$message('租户编辑成功！')
                this.$message.success(response.data);
              }
            })
            .catch((error) => {
              console.error(error);
            });
        }
      },
      // 取消更新租户
      cancelUpdateTenant() {
        this.updateTenantDialogVisible = false;
        this.updateTenantForm = {
          // 重置添加租户表单
          id: "",
          tenantName: "",
          tenantDescription: "",
          clusterId: "",
          tenantCpu: "",
          tenantMem: "",
          ids: [],
          label: [],
          annotation: [],
        };
        this.showConnectUserData = [];
        this.gvKubeClusterData = [];
        this.gvKubeUserData = [];
      },
      // 确认删除租户
      confirmDeleteTenant() {
        this.$confirm("此操作将永久删除该租户, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }).then(() => {
          this.$tenantManageApi
            .deleteTenant(this.selectedIds)
            .then((response) => {
              this.fetchTenantData();
            })
            .catch((error) => {
              console.error(error);
            });
        });
      },
      // 确认删除租户
      batchDeleteTenant() {
        console.log("1234rt");
        this.$tenantManageApi
          .deleteTenant(this.selectedIds)
          .then((response) => {
            if (response && response.code === 200) {
              this.fetchTenantData();
              this.$message.success(response.data);
            }
          })
          .catch((error) => {
            console.error(error);
          });
      },
      // 确认删除租户
      deleteTenantInfo(row) {
        this.$tenantManageApi
          .deleteTenant([row.id])
          .then((response) => {
            if (response && response.code === 200) {
              this.fetchTenantData();
              this.$message.success(response.data);
            }
          })
          .catch((error) => {
            console.error(error);
          });
      },
      // 搜索功能函数
      handleSearch() {
        this.tenantPagination.pageNum = 1; // 搜索时重置页码
        this.fetchTenantData();
      },
      // 分页获取租户数据
      fetchTenantData() {
        this.$tenantManageApi
          .pageGetTenantInfo({
            filterKey: this.searchKeyword,
            pageSize: this.tenantPagination.pageSize,
            pageNum: this.tenantPagination.pageNum,
          })
          .then((response) => {
            this.tableData = response.data.records;
            // 更新分页信息
            this.tenantPagination.total = response.data.total;
            this.tenantPagination.pageSize = response.data.size;
          })
          .catch((error) => {
            console.error(error);
          });
      },
      // 分页获取所有集群信息
      fetchClusterData() {
        this.$clusterManageApi
          .pageGetCluster({
            filterKey: "",
            pageSize: 1000,
            pageNum: 1,
          })
          .then((res) => {
            if (res && res.code === 200) {
              this.allClusterData = res.data.records;
              console.log("租户",this.allClusterData);
            }
          })
          .catch((err) => {
            console.log(err);
          });
      },
      // 分页获取用户数据
      fetchUserData() {
        this.$userManageApi
          .pageGetUserInfo({
            filterKey: "",
            pageSize: 1000,
            pageNum: 1,
          })
          .then((response) => {
            this.allUserData = response.data.records.slice(1);
          })
          .catch((error) => {
            console.error(error);
          });
      },
      handleTenantPageChange(pageNum) {
        this.tenantPagination.pageNum = pageNum;
        this.fetchTenantData();
      },
      lookTenantInfo(row) {
        this.ifChooseRow(row);
        this.handleLookTenant();
      },
      watchTenantDrawer(row) {
        this.$clusterManageApi
          .getTenantDashboard(row.id)
          .then((response) => {
            this.watchDrawerVisible = true;
            this.grafanaAddress = response.data;
            this.watchClusterName = "集群 " + row.tenantName + " 监控信息";
          })
          .catch((error) => {
            console.error(error);
          });
      },
      closeDrawer() {
        this.watchDrawerVisible = false;
        this.grafanaAddress = "";
        this.watchClusterName = "";
      },
      ifChooseRow(row) {
        //console.log(row)
        //先清空不然会存在删几条的情况
        this.selectedIds = [];
        this.selectedIds.push(row.row.id);
        this.updateTenantForm.id = row.row.id;
        this.updateTenantForm.tenantName = row.row.tenantName;
        this.updateTenantForm.tenantDescription = row.row.tenantDescription;
        this.updateTenantForm.clusterId = row.row.clusterId;
        this.updateTenantForm.tenantCpu = row.row.tenantCpu;
        this.updateTenantForm.tenantMem = row.row.tenantMem;
        //调接口以展示租户关联集群信息
        //this.getClusterDetail(this.updateTenantForm.clusterId)
        //console.log(this.selectedIds[0])
      },
      //编辑用户接口
      editTenant() {
        this.$tenantManageApi
          .editTenant(this.selectedIds[0])
          .then((res) => {
            if (res && res.code === 200) {
              this.updateTenantForm.ids = [];
              //console.log(res.data)
              this.gvKubeClusterData = [];
              this.gvKubeTenantData = [];
              this.gvKubeUserData = [];
              this.gvKubeClusterData.push(res.data.gvKubeCluster);
              this.gvKubeClusterData[0].cpuLimit = res.data.tenantVo.tenantCpu;
              this.gvKubeClusterData[0].memoryLimit = res.data.tenantVo.tenantMem;
              this.gvKubeTenantData.push(res.data.tenantVo);
              this.gvKubeUserData = res.data.gvKubeUserList;
              this.updateTenantForm.label = res.data.tenantVo.label;
              this.updateTenantForm.annotation = res.data.tenantVo.annotation;
              this.gvKubeUserData.forEach((ele) => {
                this.updateTenantForm.ids.push(ele.id);
              });
            }
          })
          .catch((err) => console.log(err));
      },
      // 删除租户
      handleDeleteTenant(row) {
        this.ifChooseRow(row);
        //this.deleteTenantDialogVisible = true
        this.confirmDeleteTenant();
      },
      handleLookTenant() {
        // 查看租户信息
        this.editTenant();
        this.fetchRoleData();
        this.lookTenantDialogVisible = true;
      },
      closeLookTenantDialogVisible(done) {
        this.updateTenantForm = {
          // 重置添加租户表单
          id: "",
          tenantName: "",
          tenantDescription: "",
          clusterId: "",
          tenantCpu: "",
          tenantMem: "",
          ids: [],
          label: [],
          annotation: [],
        };
        this.showConnectUserData = [];
        this.gvKubeClusterData = [];
        this.gvKubeTenantData = [];
        this.gvKubeUserData = [];
        done();
      },
      closeAddTenantDialogVisible(done) {
        this.addTenantForm = {
          // 重置添加租户表单
          id: "",
          tenantName: "",
          tenantDescription: "",
          clusterId: "",
          tenantCpu: "",
          tenantMem: "",
          ids: [],
          label: [],
          annotation: [],
        };
        this.showConnectUserData = [];
        this.gvKubeClusterData = [];
        this.gvKubeTenantData = [];
        this.gvKubeUserData = [];
        done();
      },
      // 编辑更新租户
      updateTenantInfoButton(row) {
        this.ifChooseRow(row);
        this.handleUpdateTenant(row.row);
      },
      handleUpdateTenant(row) {
        if (this.multipleMainTenantSelection.length > 1) {
          this.updateTenantDialogVisible = false;
          this.$message("抱歉，同时只能更新一条租户信息！");
        } else {
          this.updateTenantDialogVisible = true;
          this.fetchUserData();
          this.editTenant();
          this.fetchRoleData();
        }
      },
      // 删除
      deleteSelectedRow() {
        this.confirmDeleteTenant();
      },
      //获取用户角色信息
      fetchRoleData() {
        this.$userManageApi
          .getAllRole()
          .then((res) => {
            if (res && res.code === 200) {
              // console.log(res);
              //使用数组的reduce方法来从数组对象中提取值并创建一个新的映射对象
              // 使用reduce方法提取id和name，构建roleTypeMap对象
              this.roleTypeMap = res.data.reduce((accumulator, role) => {
                // 将role对象的id作为属性，name作为值，添加到累加器对象中
                accumulator[role.id] = role.name;
                return accumulator;
              }, {}); // 初始化累加器为空对象
              // 输出结果
              //console.log(this.roleTypeMap);
            }
          })
          .catch((err) => {
            console.log(err);
          });
      },
      //获取用户角色数字->中文的映射表
      getRoleTypeName(roleType) {
        //scope.row.roleType 表示当前行的 roleType 属性的值
        return this.roleTypeMap[roleType] || "未知角色";
      },
      //获取用户状态数字->中文的映射表
      getStatusName(userStatus) {
        // 0是启用，1是禁用
        const statusMap = {
          0: "启用",
          1: "禁用",
        };
        return statusMap[userStatus] || "未知状态";
      },
      selectClusterChange(id) {
        this.selectCluster = this.allClusterData.filter(
          (ele) => ele.id === id
        )[0];
        this.remainingResourceInfo = {};
        // this.addTenantForm.clusterId = id;
      },
      resourceSurplus() {
        if (undefined === this.selectCluster.id) {
          this.$message.error("请先选择所属集群");
          return;
        }
        this.$tenantManageApi
          .resourceSurplusInfo(this.selectCluster.id)
          .then((res) => {
            if (res && res.code === 200) {
              this.remainingResourceInfo = res.data;
            }
          });
      },
      onMouseOver(event) {
        const ev = event.target;
        const evWeight = ev.scrollWidth;
        const contentWidth = ev.clientWidth;
        if (evWeight > contentWidth) {
          this.isShowTooltip = false;
        } else {
          this.isShowTooltip = true;
        }
      },
      checkInputInfo() {
        if (this.addTenantForm.tenantCpu > this.remainingResourceInfo.remainingCpu) {
          this.$message.error("CPU数值不能大于可用数值");
          return false;
        }
        if (this.addTenantForm.tenantMem * 1024 > this.remainingResourceInfo.remainingMem) {
          this.$message.error("内存数值不能大于可用数值");
          return false;
        }
        return true;
      },
      selectUserChange(idList) {
        this.showConnectUserData = [
          ...this.allUserData.filter((userItem) =>
            idList.some((idItem) => idItem === userItem.id)
          ),
        ];
      },
      updateSelectUserChange(idList) {
        this.gvKubeUserData = [
          ...this.allUserData.filter((userItem) =>
            idList.some((idItem) => idItem === userItem.id)
          ),
        ];
      },
      addNewLabel() {
        let filter = this.addTenantForm.label.filter(
          (ele) => ele.labelKey === "" || ele.labelValue === ""
        );
        if (filter.length > 0) {
          this.$message.warning("请先将空数据填写完整");
        } else {
          this.addTenantForm.label.push({
            labelKey: "",
            labelValue: "",
          });
        }
      },
      deleteLabelOrAnnotation(operate, type, index) {
        if (operate === "add") {
          if (type === "label") {
            this.addTenantForm.label.splice(index, 1);
          } else {
            this.addTenantForm.annotation.splice(index, 1);
          }
        } else {
          if (type === "label") {
            this.updateTenantForm.label.splice(index, 1);
          } else {
            this.updateTenantForm.annotation.splice(index, 1);
          }
        }
      },
      judgeRepeat(operate, type, val) {
        let filter = [];
        if (operate === "add") {
          if (type === "label") {
            filter = this.addTenantForm.label.filter(
              (ele) => ele.labelKey === val
            );
          } else {
            filter = this.addTenantForm.annotation.filter(
              (ele) => ele.annotationKey === val
            );
          }
        } else {
          if (type === "label") {
            filter = this.updateTenantForm.label.filter(
              (ele) => ele.labelKey === val
            );
          } else {
            filter = this.updateTenantForm.annotation.filter(
              (ele) => ele.annotationKey === val
            );
          }
        }
        if (filter.length !== 1) {
          this.$message.error("重复的KEY值，请修改");
          return true;
        }
        return false;
      },
      addNewLabel1() {
        let filter = this.updateTenantForm.label.filter(
          (ele) => ele.labelKey === "" || ele.labelValue === ""
        );
        if (filter.length > 0) {
          this.$message.warning("请先将空数据填写完整");
        } else {
          this.updateTenantForm.label.push({
            labelKey: "",
            labelValue: "",
          });
        }
      },
      judgeReg(operate) {
        const labelPattern = /^[a-zA-Z0-9]{1,24}$/;
        let flag = false;
        if (operate === "add") {
          if (this.addTenantForm.label.length > 0) {
            this.addTenantForm.label.forEach((ele) => {
              if (
                !labelPattern.test(ele.labelKey) ||
                !labelPattern.test(ele.labelValue)
              ) {
                flag = true;
                this.$message.error("标签中key、value只能包含字母数字，且长度不超过24位，不能为空");
                return;
              }
              flag = this.judgeRepeat(operate, "label", ele.labelKey);
            });
            if (flag) {
              return true;
            }
          }
          if (this.addTenantForm.annotation.length > 0) {
            this.addTenantForm.annotation.forEach((ele) => {
              if (
                !labelPattern.test(ele.annotationKey) ||
                !labelPattern.test(ele.annotationValue)
              ) {
                flag = true;
                this.$message.error("注释中key、value只能包含字母数字，且长度不超过24位，不能为空");
              }
            });
            if (flag) {
              return true;
            }
          }
        } else {
          if (this.updateTenantForm.label.length > 0) {
            this.updateTenantForm.label.forEach((ele) => {
              if (
                !labelPattern.test(ele.labelKey) ||
                !labelPattern.test(ele.labelValue)
              ) {
                flag = true;
                this.$message.error("标签中key、value只能包含字母数字，且长度不超过24位，不能为空");
              }
            });
            if (flag) {
              return true;
            }
          }
          if (this.updateTenantForm.annotation.length > 0) {
            this.updateTenantForm.annotation.forEach((ele) => {
              if (
                !labelPattern.test(ele.annotationKey) ||
                !labelPattern.test(ele.annotationValue)
              ) {
                flag = true;
                this.$message.error("注释中key、value只能包含字母数字，且长度不超过24位，不能为空");
              }
            });
            if (flag) {
              return true;
            }
          }
        }
        return flag;
      },
      addNewAnnotations() {
        let filter = this.addTenantForm.annotation.filter(
          (ele) => ele.annotationKey === "" || ele.annotationValue === ""
        );
        if (filter.length > 0) {
          this.$message.warning("请先将空数据填写完整");
        } else {
          this.addTenantForm.annotation.push({
            annotationKey: "",
            annotationValue: "",
          });
        }
      },
      addNewAnnotations1() {
        let filter = this.updateTenantForm.annotation.filter(
          (ele) => ele.annotationKey === "" || ele.annotationValue === ""
        );
        if (filter.length > 0) {
          this.$message.warning("请先将空数据填写完整");
        } else {
          this.updateTenantForm.annotation.push({
            annotationKey: "",
            annotationValue: "",
          });
        }
      },
    },
    //在mounted中进行异步操作使用nextTick，不然mounted中会因为组件未完全渲染就已经执行操作而报错
    mounted() {
      this.$nextTick(() => {
        this.fetchTenantData();
      });
    },
  };
</script>

<style scoped>
  .section-context .section-context-align {
    margin-right: 19px;
  }

  .tenant-container {
    display: flex;
    flex-direction: column;
    margin-bottom: 10px;
    background: #eff4f9;
    background-size: cover;
    padding: 20px;
    /*height: 92vh;*/
  }

  .tenant-header {
    width: 100%;
    height: 100px;
    margin-top: 6px;
    background-color: #fff;
    border-radius: 20px;
  }

  .title {
    display: inline-block;
    vertical-align: top;
    font-weight: 600;
    font-size: xx-large;
    padding: 20px;
  }

  .title-content {
    color: #888888;
    padding-top: 10px;
    font-size: small;
  }

  .tenant-operate {
    background-color: #f9fbfd;
    padding: 10px 0;
  }

  .keyword {
    padding-left: 10px;
  }

  .tenant-info {
    margin-top: 10px;
  }

  .right-menu {
    display: inline;
    float: right;
    margin-right: 10px;
  }

  .el-dropdown-link {
    cursor: pointer;
    color: #409eff;
  }

  .upload {
    display: flex;
    flex-direction: row;
    align-items: center;
  }

  .uploadDiv {
    padding-left: 14px;
  }

  .el-icon-arrow-down {
    font-size: 12px;
  }

  ::v-deep .el-input {
    /*width: 26%;*/
    border-radius: 6px;
    margin-right: 4px;
  }

  ::v-deep .el-image {
    margin-left: 20px;
  }

  /*::v-deep .el-input--suffix {*/
  /*  width: 50%;*/
  /*}*/

  ::v-deep .el-table thead {
    font-size: initial;
    color: #606266;
    font-weight: 500;
  }

  ::v-deep .el-button {
    border-radius: 10px;
    display: inline-block;
  }

  ::v-deep .el-upload {
    display: block;
  }

  .dialog-title {
    font-size: 1.5em;
  }

  .dialog {
    width: 80%;
    max-width: 800px;
    margin: auto;
  }

  .form {
    text-align: center;
  }

  .section-title {
    font-size: 1.3em;
    margin-top: 10px;
    margin-bottom: 10px;
    text-align: left;
  }

  .moveRight {
    margin-left: 12px;
  }

  .secondSection-title {
    font-size: 1.2em;
    margin-top: 10px;
    margin-bottom: 10px;
    text-align: left;
  }

  .section-context {
    margin-left: 40px;
    text-align: center;
    padding-right: 10px;
  }

  .input {
    text-align: left;
  }

  .el-form-item {
    font-size: 0.8em;
  }

  .dialog-button {
    position: relative;
    left: 10px;
    display: flex;
    justify-content: space-around;
    margin: 22px;
  }

  .dialog-footer {
    display: flex;
    margin-top: 20px;
    margin-bottom: 5px;
    width: 85%;
    justify-content: right;
    /*margin-right: 100px;*/
  }

  .dialog-add {
    display: flex;
    width: 85%;
    justify-content: right;
  }

  ::v-deep .el-pagination.is-background .el-pager li:not(.disabled).active {
    background-color: #304156;
  }
</style>
